<template>
  <el-dialog
    title="迁徙数据"
    :visible.sync="dialogVisible"
    width="30%"
    append-to-body
    destroy-on-close
    :before-close="handleClose">
    <a-spin :spinning="loading">
      <el-row :gutter="24" type="flex" align="middle">
        <el-col :span="7" style="text-align: right;">
          <label >迁徙时间范围</label>
        </el-col>
        <el-col :span="17">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-col>
      </el-row>
    </a-spin>
    <div solt="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button :disabled="btnDisable" :loading="loading" type="primary" @click="handleOk">迁徙数据</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { insertLog } from '@/api/monitor/operlog'
  export default {
    name: "ComfrimModal",
    data() {
      return {
        dialogVisible: false,
        loading: false,
        dateRange: []
      }
    },
    methods: {
      handleClose() {
        this.dialogVisible = false
      },
      async handleOk () {
        this.loading = true;
        const res = await insertLog({
          params: {
            beginTime: this.dateRange[0],
            endTime: this.dateRange[1],
          }
        });
        this.loading = false
        if (res.code !== 200)
          return this.$message.error(res.message || '迁移日志失败请重试')
        this.$message.success('迁移数据成功！')
        this.dialogVisible = false
      }
    },
    computed: {
      btnDisable () {
        return  !(this.dateRange.length > 0 || false)
      }
    },
  }
</script>

<style scoped>
.dialog-footer{
  margin-top: 20px;
  text-align: right;
}
</style>

